﻿<!DOCTYPE html>
<html>

<head>
    <title>省市区三级联动/Jquery</title>
    <meta charset=utf-8>
    <meta name=description content="">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <style type="text/css">
        div {
            margin-top: 15px;
        }
        
        ul {
            list-style: none;
            width: 150px;
            border: 1px solid;
            height: 450px;
            overflow: auto;
            margin: 0;
            padding: 0;
        }
        
        li:hover {
            background: #cccccc;
        }
        
        li.active {
            background: #F8F7AF;
        }
        
        input {
            width: 150px;
        }
        
        .area div {
            display: inline-block;
        }
        
        .area div:last {
            clear: both;
        }
    </style>
    <script src="js/jquery.min.js"></script>
    <script src="js/area.js"></script>
    <script>
        $(function() {
            //简单实现,绑定Select控件组，实现级联下拉选择
            //先定义一个对象，用于保存选中的省、市、区{currProcinve、currCity、currCounty}
            //如果不需要获取选中的省、市、区或者自己另外实现，可不传该对象
            var AreaSlt1 = {};

            Area.BindSelect({
                province: $('#pro1'),
                city: $('#city1'),
                county: $('#county1'),
                hasCounty: true
            }, AreaSlt1);

            $('#pro1,#city1,#county1').on('change', '', function() {
                var county = (typeof AreaSlt1.currCounty === "undefined") ? "" : ("-" + AreaSlt1.currCounty.name)
                $('#showCurr1').html(AreaSlt1.currProvince.name + "-" + AreaSlt1.currCity.name + county);
            });
        });
    </script>
    <script src="js/pinyin_dict_withtone.js"></script>
    <script src="js/pinyinUtil.js"></script>
    <script>
        $(function() {
            //复杂实现,支持关键字筛选
            //若要支持拼音筛选(全拼或简拼)，需引入pinyin_dict_withtone.js、pinyinUtil.js
            Area.hasCounty = true;
            Area.Init();

            var area = {};
            area.currProvince = {};
            area.currCity = {};
            area.currCounty = {};

            setTimeout(function() {
                setPro2();
                console.log(Area.area);
            }, 300);

            $('#pro2').on('click', 'li', function() {
                $('#city2s').val('');
                area.currProvince = area.province[$(this).attr('id')];
                setCity2();
            });

            $('#city2').on('click', 'li', function() {
                $('#county2s').val('');
                area.currCity = area.city[$(this).attr('id')];
                setCounty2();
            });

            $('#county2').on('click', 'li', function() {
                area.currCounty = area.county[$(this).attr('id')];
            });

            $('#pro2,#city2,#county2').on('click', 'li', function() {
                $(this).addClass('active').siblings().removeClass('active');
                //console.log(area.currCounty);
                $('#showCurr2').html(area.currProvince.name + "-" + area.currCity.name + "-" + area.currCounty.name);
            });

            $('#pro2s').on('input', '', function() {
                $('#city2s').val('');
                setPro2($(this).val());
            });

            $('#city2s').on('input', '', function() {
                $('#county2s').val('');
                setCity2($(this).val());
            });

            $('#county2s').on('input', '', function() {
                setCounty2($(this).val());
            });

            function setPro2(param) {
                area.province = Area.GetProvince(param);
                $('#pro2').html('');
                $.each(area.province, function(index, val) {
                    $('#pro2').append('<li id="' + index + '">' + val.name + '</li>');
                });
                $('#pro2 li:first').click();
            };

            function setCity2(param) {
                area.city = Area.GetCity(area.currProvince, param);
                $('#city2').html('');
                $.each(area.city, function(index, val) {
                    $('#city2').append('<li id="' + index + '">' + val.name + '</li>');
                });
                $('#city2 li:first').click();
            };

            function setCounty2(param) {
                area.county = Area.GetCounty(area.currCity, param);
                $('#county2').html('');
                $.each(area.county, function(index, val) {
                    $('#county2').append('<li id="' + index + '">' + val.name + '</li>');
                });
                $('#county2 li:first').click();
            };

        });
    </script>

</head>

<body>
    <h3>带区级</h3>
    <div>
        <select id="pro1"></select>
        <select id="city1"></select>
        <select id="county1"></select>
        <span id="showCurr1">
    </span>
    </div>
    <div class="area">
        <div>
            <input type="text" id="pro2s" placeholder="搜索省份">
            <ul id="pro2">
            </ul>
        </div>
        <div>
            <input type="text" id="city2s" placeholder="搜索城市">
            <ul id="city2">
            </ul>
        </div>
        <div>
            <input type="text" id="county2s" placeholder="搜索区/县">
            <ul id="county2">
            </ul>
        </div>
        <div id="showCurr2"></div>
    </div>
</body>

</html>